<template>
  <div class="my-footer" v-if="todoList.length">
    <div>
      <!-- <input type="checkbox" :checked="isAllDone" @change="selectAll" /> -->
      <input type="checkbox" v-model="isAllDone" />
      <label for>已完成{{hasDone}}/全部{{todoList.length}}</label>
    </div>
    <button class="delete-done-button" @click="clearAll">清除已完成任务</button>
  </div>
</template>

<script>
export default {
  name: 'MyFooter',
  props: ['todoList'],
  computed: {
    hasDone () {
      // Array.reduce方法
      return this.todoList.reduce((count, todo) => count + (todo.done ? 1 : 0), 0)


      // Array.forEach
      // let count = 0
      // this.todoList.forEach(todo => {
      //   if (todo.done === true) count++
      // })
      // return count

      // ------------------------------
      // for循环
      // let count = 0
      // for (let i = 0; i < this.todoList.length; i++) {
      //   if (this.todoList[i].done === true) {
      //     count++
      //   }
      // }
      // return count
    },
    // 计算属性之间可以套娃
    // 计算属性的函数式写法默认只有getter
    // isAllDone () {
    //   return this.todoList.length === this.hasDone && this.todoList.length > 0
    // }
    // 计算属性完整写法
    isAllDone: {
      get () {
        return this.todoList.length === this.hasDone && this.todoList.length > 0
      },
      set (value) {
        this.$emit('checkAllTodo', value)
      }
    }
  },
  methods: {
    // selectAll (e) {
    //   this.checkAllTodo(e.target.checked)
    // },

    clearAll () {
      if (confirm('确定要删除吗？')) {
        this.$emit('cancelAllTodo')
      }
    }
  }
}
</script>

<style scoped>
input {
  zoom: 110%;
}

.my-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 15px;
  padding: 10px;
}

.delete-done-button {
  padding: 8px;
  border: none;
  border-radius: 5px;
  color: #fff;
  background-color: #be3a31;
}
</style>
